<template>
  <div>
      <div class="top">
          <span @click="goback">关闭</span>
          <p>余额充值</p>
      </div>
      <div class="content">
          <li>
              <span>金额</span>
              <input type="text" v-model="balance" placeholder="填写金额">
              <span>元</span>
          </li>
          <div class="space"></div>
          <ul>
              <span>隐藏余额转入提醒</span>
                <van-switch v-model="checked" active-color="#07c160"  size="14px;" inactive-color="#ccc" />
          </ul>
         <button @click="go">完成</button>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            checked:false,
            balance:null,
        }
    },
    methods:{
        goback(){
            this.$router.go("-1")
        },
        go(){
            if(this.balance){
                this.global.balance = this.balance
                this.$toast.success("充值成功");
                this.$router.go("-1")
            }else{
                this.$toast.fail("请输入要充值的金额")
            }

            
        }
    }
    
}
</script>

<style lang="less" scoped>
.space{
    height: 15px;
    background-color: #f6f6f6;
}
.top{
    background-color: #ff8f87;
    display: flex;
    align-items: center;
    height: 40px;
    span{
        color: #fff;
        font-size: 13px;
        margin-left: 10px;
    }
    p{
        margin: 0;
        margin-left: 33%;
        color: #fff;
    }
}
.content{
    padding-top: 20px;
    background-color: #f6f6f6;
    height: 700px;
    ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
        height: 35px;
        background-color: #fff;
        span{
            font-size: 13px;
        }        
    }
    li{
        display: flex;
        align-items: center;
        width: 95%;
        margin: 0 auto;
        background-color: #fff;
        span{
            font-size: 13px;
            margin-left: 5px;
            margin-right: 10px;
        }
        input{
        border: none;
        display: block;
        background-color: #fff;
        height: 30px;
        font-size: 12px;
        width: 20%;
        margin-left: auto;
        }
    }

    button{
        width: 95%;
        height: 35px;
        display: block;
        margin: 30px auto;
        border: none;
        color: #fff;
        background-color: #ccc;
    }
}
</style>